{% extends 'layout.html' %}
{% block content %}
    <div class="container">
        <div style="margin-bottom: 10px">
            {# 传统方式，跳转到另一页面进行编辑添加 #}
            {#            <a class="btn btn-success" href="/user/add/">#}
            {#                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true">新建用户</span>#}
            {#            </a>#}
            {# 在模态窗口中添加，在button按钮中加入（ data-toggle="modal"  data-target="#userModal" ）2个属性，就可打开指定的模态框 #}
            {#            <input type="button" class="btn btn-primary" value="新增用户（方式1）" data-toggle="modal"#}
            {#                   data-target="#userModal">#}
            {# 在模态窗口中添加，用javascript方式打开模态框 #}
            <!-- Single button -->
            <div class="btn-group" role="group" aria-label="...">

            </div>


        </div>
        {# 用户列表 #}
        <div class="panel panel-default">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                用户列表
                <span>　　</span>
                <input id="btnAdd" type="button" class="btn btn-primary btn-xs" value="新增">
                <!-- Multiple Select -->
                <div style="float: right;">
                    {{ select }}
                </div>
            </div>
            <div class="panel-body">
                <table class="table table-striped table-hover">
                    <thead>
                    <tr style="background-color: #5B9BD5;color: white">
                        {% if fields.id.0 %}
                            <th>序号</th>{% endif %}
                        {% if fields.admin.0 %}
                            <th>管理员</th>{% endif %}
                        {% if fields.employeeid.0 %}
                            <th>员工号</th>{% endif %}
                        {% if fields.name.0 %}
                            <th>姓名</th>{% endif %}
                        {% if fields.password.0 %}
                            <th>密码</th>{% endif %}
                        {% if fields.login_time.0 %}
                            <th>最后登录时间</th>{% endif %}
                        {% if fields.create_time.0 %}
                            <th>创建时间</th>{% endif %}
                        {% if fields.update_time.0 %}
                            <th>更新时间</th>{% endif %}
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for user in users %}
                        <tr>
                            {% if fields.id.0 %}
                                <td>{{ user.id }}</td>{% endif %}
                            {% if fields.admin.0 %}
                                <td>{{ user.get_admin_display }}</td>{% endif %}
                            {% if fields.employeeid.0 %}
                                <td>{{ user.employeeid }}</td>{% endif %}
                            {% if fields.name.0 %}
                                <td>{{ user.name }}</td>{% endif %}
                            {% if fields.password.0 %}
                                <td>{{ user.password }}</td>{% endif %}
                            {% if fields.login_time.0 %}
                                <td>{{ user.login_time }}</td>{% endif %}
                            {% if fields.create_time.0 %}
                                <td>{{ user.create_time }}</td>{% endif %}
                            {% if fields.update_time.0 %}
                                <td>{{ user.update_time }}</td>{% endif %}
                            <td>
                                <input nid="{{ user.id }}" type="button" value="编辑"
                                       class="btn btnEdit btn-primary btn-xs">
                                <input did="{{ user.id }}" type="button" value="删除"
                                       class="btn btnDelete btn-danger btn-xs">
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {# 用户新增/编辑模态框 #}
    <div class="modal fade" id="userModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="userModalTitle">新增用户</h4>
                </div>
                <div style="margin-top: -31px" class="modal-body">
                    <form id="userForm">
                        {% for field in form %}
                            <div class="col-xs-12" style="position: relative">
                                <label style="margin-top: 20px;">{{ field.label }}:</label>
                                {{ field }}
                                <span class="error-msg" style="color: red;position: absolute"></span>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button style="margin-top: 10px;" type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button id="btnDoSave" style="margin-top: 10px;" type="button" class="btn btn-primary">保 存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    {# 删除确认窗口#}
    <div class="modal fade" id="userDeleteModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <h4>删除确认!</h4>
                <p style="margin: 20px 0px;"> 注意：确认删除后，关联数据也会被一同删除.</p>
                <p style="text-align: right">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="btnDoDelete" type="button" class="btn btn-danger">确认</button>
                </p>
            </div>
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

{% endblock %}

{% block js %}
    <script type="text/javascript">
        var DELETE_ID;
        var EDIT_ID;    // -1：表示新增；>0：表示编辑ID为EDIT_ID的记录

        $(function () {

            $('#col_select').multipleSelect({
                onClose: function () {
                    {#alert('Selected values: ' + $('#col_select').multipleSelect('getSelects'))#}
                    {#alert('Selected texts: '  + $('#col_select').multipleSelect('getSelects', 'text'))#}
                    $.ajax({
                        url: '/user/fields/?f=' + $('#col_select').multipleSelect('getSelects'),
                        type: 'GET',
                        success: function (res) {
                            if (!res.status)
                                alert(res.errors);

                            location.reload();
                        }
                    });
                }
            });

            {# 显示新增模态窗口 #}
            bindBtnShowAddWindowsOnClick();

            {# 显示编辑模态窗口 #}
            bindbtnShowEditWindowsOnClick();

            {# 显示删除警告提示窗口 #}
            bindbtnShowDeleteWindowsOnClick();

            {# 模态窗口中的保存按钮单击事件 #}
            bindbtnDoSaveOnClick();
            {# 删除记录 #}
            bindbtnDoDeleteOnClick();
        })

        {# 显示新增模态窗口 #}

        function bindBtnShowAddWindowsOnClick() {
            $('#btnAdd').click(function () {
                EDIT_ID = -1;  // 未定义变量
                {# 模态框javascript调用方式 #}
                $('#userModalTitle').text('新增用户');
                // 清空错误信息，<span class="error-msg" style="color: red;"></span>
                $('.error-msg').empty();
                $('#userForm')[0].reset();  // 清除form中输入框的原有显示
                $('#userModal').modal('show');
            });
        }

        {# 显示编辑模态窗口 #}

        function bindbtnShowEditWindowsOnClick() {
            $('.btnEdit').click(function () {
                $('#userModalTitle').text('编辑用户');
                $('#userForm')[0].reset();  // 清除form中输入框的原有显示
                {# 获取button的nid值 #}
                var nid = $(this).attr('nid');
                EDIT_ID = nid;
                // 发送ajax到后台获取当前行的信息
                $.ajax({
                    url: '/user/edit/',
                    type: 'POST',
                    data: {nid},
                    dataType: 'JSON',
                    success: function (res) {
                        {#alert(res.password);#}
                        {#console.log(res.name);#}
                        if (res.status) {
                            // 清空错误信息，<span class="error-msg" style="color: red;"></span>
                            $.each(res.data, function (name, value) {
                                $('#id_' + name).val(value);
                                console.log(name, value);
                            })
                            $('.error-msg').empty();
                            $('#userModal').modal('show');
                        } else {
                            alert(res.errors)
                        }
                    }
                });
            })
        }

        {# 显示删除警告提示窗口 #}

        function bindbtnShowDeleteWindowsOnClick() {
            $('.btnDelete').click(function () {
                $('#userDeleteModal').modal('show');
                var did = $(this).attr('did');
                DELETE_ID = did;
                console.log(did);
            })
        }

        {# 新增、编辑保存。 EDIT_ID = -1：表示新增；EDIT_ID >= 0：表示编辑ID为的记录 #}

        function bindbtnDoSaveOnClick() {
            $("#btnDoSave").click(function () {
                {#alert('保存数据')#}
                $.ajax({
                    url: '/user/save/?eid=' + EDIT_ID,
                    type: 'POST',
                    data: $('#userForm').serialize(),  // userModal 中所有要提交的数据
                    dataType: 'JSON',
                    success: function (res) {  // res 为提交后，服务器返回给浏览器的数据
                        console.log(res);
                        if (res.status) {
                            {#alert("数据保存成功！")#}
                            location.reload()   // 刷新页面
                            $('#userModal').modal('hide');   // 隐藏模态窗口
                        } else {
                            {# 把错误信息显示在前端,源代码举例如下 #}
                            {#<form id="userForm" role="form" method="post">#}
                            {#        <label>工号:</label>#}
                            {#        <input type="text" name="employeeid" maxlength="10" class="form-control" placeholder="工号" required id="id_employeeid">  #}
                            {#        <span class="error-msg" style="color: red;"></span>  #}

                            {# $('#id_employeeid').next()语句可定位到input标签的下一个 <span class="error-msg" style="color: red;"></span> 标签  #}
                            $.each(res.errors, function (name, errorlist) {
                                $('#id_' + name).next().text(errorlist[0]);
                            })
                        }
                    }
                })
            });
        }

        function bindbtnDoDeleteOnClick() {
            $('#btnDoDelete').click(function () {
                $.ajax({
                    url: '/user/delete/?userid=' + DELETE_ID,
                    type: 'GET',
                    success: function (res) {
                        if (!res.status)
                            alert(res.errors);

                        $('#userDeleteModal').modal('hide');
                        location.reload();
                    }
                });
            });
        }


    </script>
{% endblock %}

